<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>一争高下</title>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css">
    <style type="text/css">
    	.bgimage{
    		background:url('../../img/spree/begspree.jpg') no-repeat;
    		background-size: cover;
    		opacity:0.3;filter:alpha(opacity=30);
    		min-height:800px;
    		z-index:-1;
    		position: relative;
    	}
        .fixstyle{
        	position: absolute;top: 0px;left: 0px;z-index:0;width: 100%;
            color: rgb(0, 11, 251);
            -webkit-text-stroke-width:1px;-webkit-text-stroke-color:rgba(7, 227, 246, 0.49);
            font-family: '微软雅黑'
        }
    </style>
</head>
<body style="margin: 0px;">
    <div class="bgimage" style=""></div>

	<div class="fixstyle" style="text-align: center;margin-top: 10px;">
    <!-- 总的请求次数 -->
        <div style="position: absolute;left: 15%;text-align: center;">
            <div id="indicatorContainer"></div>
            <div class="" id="totalAttack" style="color: #FFBE00;font-size: 15pt;"></div>
        </div>
    <!-- 平均每人请求数 -->
        <div style="position: absolute;left: 35%">
            <div id="indicatoravrageCount"></div>
            <div class="" style="color: #1ABC9C;font-size: 15pt;" id="avrageCount"></div>
        </div>
    <!-- 总的参与人数 -->
        <div style="position: absolute;left: 55%">
            <div id="indicatorpeople"></div>
            <div class="" style="color: #3498DB;font-size: 15pt;" id="totalpoeple"></div>
        </div>
    <!-- 总次数／时长 -->
        <div style="position: absolute;left: 75%">
            <div id="indicatorvarTime"></div>
            <div class="" style="color: #EA38CF;font-size: 15pt;" id="varTime"></div>
        </div>
    </div>
<!-- 发出请求次数最多的10个人 -->
    <div class="fixstyle" style="top:170px;left: 25%;width: 750px"> 
        <div class="" id="toppeople">
            <table class="table table-bordered" style="">
                <thead>
                    <tr >
                        <th>排名</th>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                        <th>6</th>
                        <th>7</th>
                        <th>8</th>
                        <th>9</th>
                        <th>10</th>
                    </tr>
                </thead>
                <tbody id="toppeopleshow">
                </tbody>
            </table>
        </div>
    </div>
<!-- 每桌每轮攻击次数列表 -->
	<div class="fixstyle" style="top:300px;width: 500px;left: 10%;">
        <div style=";display: block;float: left;">
    		<table class="table table-bordered" style="">
    			<thead>
    				<tr >
    					<th>&nbsp;</th>
    					<th>第一轮</th>
    					<th>第二轮</th>
    					<th>第三轮</th>
    					<th>第四轮</th>
    					<th>第五轮</th>
    					<th>第六轮</th>
    					<th>第七轮</th>
    				</tr>
    			</thead>
    			<tbody id="tableshow">
    			</tbody>
    		</table>
        </div>
	</div>
    <div class="fixstyle" style="top:300px;left: 55%;width: 515px">
        <div style="display: block;">
            <table class="table table-bordered" style="display: block;">
                <thead>
                    <tr >
                        <th>&nbsp;</th>
                        <th>第一轮</th>
                        <th>第二轮</th>
                        <th>第三轮</th>
                        <th>第四轮</th>
                        <th>第五轮</th>
                        <th>第六轮</th>
                        <th>第七轮</th>
                    </tr>
                </thead>
                <tbody id="_tableshow">
                </tbody>
            </table>
        </div>
    </div>


    
<div id="mainIP" hidden="hidden"><%=httpUrl%></div>
</body>

<script src="../../js/jquery.js"></script>
<script src="../../js/plugins/layer/layer.js"></script>
<!-- <script src="https://code.highcharts.com"></script> -->
<script src="../../js/hc/radialIndicator.min.js"></script>
<script type="text/javascript">
var ip = $("#mainIP").html();
$(function(){
	getdata();
})

function getdata(){
	$.ajax({
	    url:ip+'showattack/data',
	    type:'get',
	    success:function(data){
            showdata(data);
	    },
	    error:function(err){
	     	console.log(err);
	    }
	})
}
function showdata(data){

    var toppeople = data.toppeople;//发出请求数最多的人员
    var stage_1 = data.stage_1;
    var stage_2 = data.stage_2;
    var stage_3 = data.stage_3;
    var stage_4 = data.stage_4;
    var stage_5 = data.stage_5;
    var stage_6 = data.stage_6;
    var stage_7 = data.stage_7;

    // var munArr = (data.data.totalAttack+'').split('');
    // munArr[1] = (parseInt(munArr[1]) +1).toString();
    // var totalAttack = parseInt(munArr.join(''));//总的请求次数
    var totalAttack = data.data.totalAttack;//总的请求次数
    $('#indicatorContainer').radialIndicator({
        barColor: '#FFBE00',
        barWidth: 10,
        initValue: totalAttack,
        roundCorner : true,
        percentage: false,
        minValue: 10,
        maxValue: totalAttack
    });
    var totalpoeple = data.data.totalpoeple;//总的参与人员
    $('#indicatorpeople').radialIndicator({
        barColor: '#3498DB',
        barWidth: 10,
        initValue: totalpoeple,
        roundCorner : true,
        minValue: 1,
        maxValue: totalpoeple
    });
    var avrageCount = saveTwo(totalAttack/totalpoeple, 2);// 平均每人请求数
    $('#indicatoravrageCount').radialIndicator({
        barColor: '#1ABC9C',
        barWidth: 10,
        initValue: avrageCount,
        roundCorner : true,
        percentage: false,
        minValue: 1,
        maxValue: avrageCount
    });
    var varTime = saveTwo(totalAttack/150, 2);
    $('#indicatorvarTime').radialIndicator({
        barColor: '#EA38CF',
        barWidth: 10,
        initValue: varTime,
        roundCorner : true,
        percentage: false,
        minValue: 0.1,
        maxValue: varTime
    });
    $("#totalAttack").html("总的请求次数:"+totalAttack);
    $("#totalpoeple").html("总的参与人数:"+totalpoeple);
    $("#avrageCount").html("平均每人请求数:"+avrageCount);
    $("#varTime").html("平均每秒并发数:"+varTime);

// 每桌每轮攻击次数列表
    var str = '';
    for(var j= 1;j<= 12; j++){
        var name = getName(j)
        str += '<tr><th>'+name+'</th>';
        for(var i=1; i <= 7; i++){
            var count = getTableAttack(j, i, data);
            str +='<th>'+count+'</th>'
        }
        str +='</tr>';
    }
    $("#tableshow").append(str);
    var _str = '';
    for(var h=13 ;h<= 24; h++){
        var name = getName(h)
        _str += '<tr><th>'+name+'</th>';
        for(var i=1; i <= 7; i++){
            var count = getTableAttack(h, i, data);
            _str +='<th>'+count+'</th>'
        }
        _str +='</tr>';
    }
    $("#_tableshow").append(_str);

// 发出请求数最多的十个人
    var string = '<tr><th>姓名</th>';
    for(var k=0 ;k < 10; k++){
        string += '<th>'+toppeople[k].name+'</th>';
    }
     string += '</tr>';
     var _string = '<tr><th>请求次数</th>';
     for(var y=0 ;y < 10; y++){
         _string += '<th>'+toppeople[y].count+'</th>';
     }
      _string += '</tr>';
    $("#toppeopleshow").append(string).append(_string);

    
}
function getName(j){
    switch(j){
        case 1: return "第一桌";
        case 2: return "第二桌";
        case 3: return "第三桌";
        case 4: return "第四桌";
        case 5: return "第五桌";
        case 6: return "第六桌";
        case 7: return "第七桌";
        case 8: return "第八桌";
        case 9: return "第九桌";
        case 10: return "第十桌";
        case 11: return "第十一桌";
        case 12: return "第十二桌";
        case 13: return "第十三桌";
        case 14: return "第十四桌";
        case 15: return "第十五桌";
        case 16: return "第十六桌";
        case 17: return "第十七桌";
        case 18: return "第十八桌";
        case 19: return "第十九桌";
        case 20: return "第二十桌";
        case 21: return "第二十一桌";
        case 22: return "第二十二桌";
        case 23: return "第二十三桌";
        case 24: return "第二十四桌";
        default:return "";

    }
}
function getTableAttack(j, i, data){
    switch(i){
        case 1: 
            var attacks = 0; 
            for(var a=0;a< data.stage_1.length; a++){
                var table = data.stage_1[a].table;
                if(parseInt(table) == j){
                    attacks = data.stage_1[a].attacks;
                }
            }
            return attacks;
        case 2: 
            var attacks = 0; 
            for(var a=0;a< data.stage_2.length; a++){
                var table = data.stage_2[a].table;
                if(parseInt(table) == j){
                    attacks = data.stage_2[a].attacks;
                }
            }
            return attacks;;
        case 3: 
            var attacks = 0; 
            for(var a=0;a< data.stage_3.length; a++){
                var table = data.stage_3[a].table;
                if(parseInt(table) == j){
                    attacks = data.stage_3[a].attacks;
                }
            }
            return attacks;;
        case 4: 
            var attacks = 0; 
            for(var a=0;a< data.stage_4.length; a++){
                var table = data.stage_4[a].table;
                if(parseInt(table) == j){
                    attacks = data.stage_4[a].attacks;
                }
            }
            return attacks;;
        case 5: 
            var attacks = 0; 
            for(var a=0;a< data.stage_5.length; a++){
                var table = data.stage_5[a].table;
                if(parseInt(table) == j){
                    attacks = data.stage_5[a].attacks;
                }
            }
            return attacks;;
        case 6: 
            var attacks = 0; 
            for(var a=0;a< data.stage_6.length; a++){
                var table = data.stage_6[a].table;
                if(parseInt(table) == j){
                    attacks = data.stage_6[a].attacks;
                }
            }
            return attacks;;
        case 7: 
            var attacks = 0; 
            for(var a=0;a< data.stage_7.length; a++){
                var table = data.stage_7[a].table;
                if(parseInt(table) == j){
                    attacks = data.stage_7[a].attacks;
                }
            }
            return attacks;;
        default:return "";
    }
}
// 保留两位有小数
function saveTwo(digit, length) {
    length = length ? parseInt(length) : 0;
    if (length <= 0) return Math.round(digit);
    digit = Math.round(digit * Math.pow(10, length)) / Math.pow(10, length);
    return digit;
};
</script>
</html>